<template>
	<div>
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="item in lunbotulist" :key="item.url">
				<img :src="item.img" alt="">
			</mt-swipe-item>
		</mt-swipe>
		<!-- 9宫格到6宫格改造 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/newlist">
					<img src="../../images/收藏.png" alt="">
					<div class="mui-media-body">新闻资讯</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/photo">
					<img src="../../images/分享.png" alt=""></span>
					<div class="mui-media-body">图片分享</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/播放.png" alt="">
					<div class="mui-media-body">商品购买</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/猜你喜欢.png" alt="">
					<div class="mui-media-body">联系我们</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/暂停.png" alt="">
					<div class="mui-media-body">留言反馈</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/导航地址.png" alt="">
					<div class="mui-media-body">视频分享</div>
				</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import mui from '../../lib/mui/dist/js/mui.min.js'
	import {
		Toast
	} from 'mint-ui';
	export default {
		data() {
			return {
				lunbotulist: [] //保存轮播图的数组
			}
		},
		created() {
			this.getLunbotu()
		},
		methods: {
			getLunbotu() { //获取轮播图数据
				this.axios.get('/lunbotu')
					.then(res => {
						var cback = res.data
						if (cback.err_code === 0) {
							this.lunbotulist = cback.lunbotu
						} else {
							Toast({
								message: '获取轮播图失败',
								position: 'bottom',
								duration: 2000
							})
						}
					})
					.catch(function(error) { //catch的作用,如果前面有任何的promise执行失败,会立即终止所有的promise执行,并进入catch,抛出异常
						//捕获promise的错误
						console.log(error);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mint-swipe {
		height: 200px;

		.mint-swipe-item {
			&:nth-child(1) {
				background-color: red;
			}

			&:nth-child(2) {
				background-color: blue;
			}

			&:nth-child(3) {
				background-color: cyan;
			}

			&:nth-child(4) {
				background-color: pink;
			}

			img {
				width: 100%;
				height: 100%;
			}
			.mui-media-body{
				font-size: 13px;
			}
		}
	}
	.mui-grid-view.mui-grid-9{
		background: #fff;
		border: none;
		img {
			width: 60px;
			height: 60px;
		}
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border: none;
	}
</style>
